<template>
	<view class="container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-avatar" @click="previewAvatar">
				<image v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" class="avatar-image" mode="aspectFill"></image>
				<text v-else class="avatar-text">{{userInfo.avatarText}}</text>
				<view class="avatar-edit-overlay">
					<text class="avatar-edit-icon">📷</text>
				</view> 
			</view>
			<view class="user-info">
				<text class="user-name">{{userInfo.name}}</text>
				<text class="user-desc">{{userInfo.desc}}</text>
				<view class="user-tags">
					<text v-for="(tag, index) in userInfo.tags" :key="index" class="user-tag">{{tag}}</text>
				</view>
			</view>
			<view class="user-edit" @click="goToEditProfile">
				<text class="edit-icon">✏️</text>
			</view>
		</view>

		<!-- 统计概览 -->
		<view class="stats-section">
			<view class="stats-grid">
				<view class="stats-item">
					<text class="stats-number">{{stats.totalDays}}</text>
					<text class="stats-label">记账天数</text>
				</view>
				<view class="stats-item">
					<text class="stats-number">{{stats.totalRecords}}</text>
					<text class="stats-label">记账笔数</text>
				</view>
				<view class="stats-item">
					<text class="stats-number">{{stats.avgDaily}}</text>
					<text class="stats-label">日均支出</text>
				</view>
			</view>
		</view>


		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-group">
				<view class="menu-item" @click="goToRecords">
					<view class="menu-icon">📊</view>
					<text class="menu-title">记账记录</text>
					<text class="menu-arrow">></text>
				</view>
				<!-- <view class="menu-item" @click="goToCategories">
					<view class="menu-icon">🏷️</view>
					<text class="menu-title">分类管理</text>
					<text class="menu-arrow">></text>
				</view> -->
				<view class="menu-item" @click="goToAccountManagement">
					<view class="menu-icon">💳</view>
					<text class="menu-title">账户管理</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="goToBudgets">
					<view class="menu-icon">💰</view>
					<text class="menu-title">预算设置</text>
					<text class="menu-arrow">></text>
				</view>
			</view>

			<!-- <view class="menu-group">
				<view class="menu-item" @click="exportData">
					<view class="menu-icon">📤</view>
					<text class="menu-title">数据导出</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="backupData">
					<view class="menu-icon">💾</view>
					<text class="menu-title">数据备份</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="importData">
					<view class="menu-icon">📥</view>
					<text class="menu-title">数据导入</text>
					<text class="menu-arrow">></text>
				</view>
			</view> -->

			<view class="menu-group">
				<view class="menu-item" @click="goToChangePassword">
					<view class="menu-icon">🔐</view>
					<text class="menu-title">修改密码</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="goToThemeSettings">
					<view class="menu-icon">🎨</view>
					<text class="menu-title">主题设置</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="goToSettings">
					<view class="menu-icon">⚙️</view>
					<text class="menu-title">应用设置</text>
					<text class="menu-arrow">></text>
				</view>
				<!-- <view class="menu-item" @click="goToAbout">
					<view class="menu-icon">ℹ️</view>
					<text class="menu-title">关于我们</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="goToFeedback">
					<view class="menu-icon">💬</view>
					<text class="menu-title">意见反馈</text>
					<text class="menu-arrow">></text>
				</view> -->
			</view>

			<!-- 退出登录 -->
			<view class="menu-group">
				<view class="menu-item logout-item" @click="handleLogout">
					<view class="menu-icon">🚪</view>
					<text class="menu-title">退出登录</text>
					<text class="menu-arrow">></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getRecords, calculateStats, exportData, importData, getSettings, saveSettings } from '@/utils/storage.js'
	import { authManager } from '@/utils/auth.js'
	import { userAPI, fileAPI, recordAPI } from '@/utils/api.js'
	import themeManager from '@/utils/theme.js'
	
	export default {
		data() {
			return {
				userInfo: {
					name: '记账达人',
					desc: '让每一笔账都清清楚楚',
					avatarText: '👤',
					avatarUrl: '',
					tags: ['记账达人', '理财新手'],
					email: '',
					phone: ''
				},
				stats: {
					totalDays: 0,
					totalRecords: 0,
					avgDaily: 0
				},
				appVersion: '1.0.0'
			}
		},
		onLoad() {
			// 检查登录状态
			const token = uni.getStorageSync('token')
			console.log('当前token:', token ? '存在' : '不存在')
			
			this.loadUserInfo()
			this.loadUserStats()
		},
		onShow() {
			console.log('MinePage onShow 触发')
			// 每次显示页面时重新加载统计数据
			this.loadUserStats()
			// 重新加载用户信息（可能在编辑页面被修改了）
			this.loadUserInfo()
		},
		activated() {
			console.log('MinePage activated 触发')
			// keep-alive组件激活时触发
			this.loadUserStats()
			this.loadUserInfo()
		},
		methods: {
			// 加载用户信息
			async loadUserInfo() {
				console.log('=== 开始加载用户信息 ===')
				const token = uni.getStorageSync('token')
				console.log('Token状态:', token ? '存在' : '不存在')
				
				try {
					// 尝试从后端获取用户信息
					console.log('正在调用后端API...')
					const userProfile = await userAPI.getProfile()
					console.log('后端返回的用户信息:', userProfile)
					if (userProfile) {
						// 处理标签（将逗号分隔的字符串转换为数组）
						const tags = userProfile.tags ? userProfile.tags.split(',').filter(tag => tag.trim()) : []
						
						// 判断avatar字段是URL还是表情符号
						const isAvatarUrl = userProfile.avatar && (
							userProfile.avatar.startsWith('/') || 
							userProfile.avatar.startsWith('http') ||
							userProfile.avatar.includes('upload')
						)
						
						this.userInfo = {
							name: userProfile.nickname || userProfile.username || '记账达人',
							desc: userProfile.description || '让每一笔账都清清楚楚',
							avatarText: isAvatarUrl ? '👤' : (userProfile.avatar || '👤'),
							avatarUrl: isAvatarUrl ? userProfile.avatar : '',
							tags: tags.length > 0 ? tags : ['记账达人', '理财新手'],
							email: userProfile.email || '',
							phone: userProfile.phone || ''
						}
						
						console.log('处理后的用户信息:', this.userInfo)
						
						// 保存到本地存储
						uni.setStorageSync('user_profile', this.userInfo)
					}
				} catch (e) {
					console.log('=== 后端API调用失败 ===')
					console.log('错误信息:', e.message || e)
					console.log('开始使用本地数据...')
					// 如果后端加载失败，使用本地存储的数据
					try {
						const savedUserInfo = uni.getStorageSync('user_profile')
						console.log('本地存储的用户信息:', savedUserInfo)
						if (savedUserInfo) {
							this.userInfo = { ...this.userInfo, ...savedUserInfo }
							console.log('使用本地用户信息:', this.userInfo)
						} else {
							console.log('本地没有用户信息，使用默认数据')
							// 尝试从登录时保存的基本用户信息获取
							const loginUserInfo = uni.getStorageSync('userInfo')
							if (loginUserInfo) {
								console.log('使用登录时的用户信息:', loginUserInfo)
								this.userInfo = {
									...this.userInfo,
									name: loginUserInfo.nickname || loginUserInfo.username || '记账达人',
									email: loginUserInfo.email || '',
									avatarUrl: loginUserInfo.avatar || '',
									avatarText: loginUserInfo.avatar ? '👤' : '👤'
								}
							}
						}
					} catch (localError) {
						console.log('加载本地用户信息失败:', localError)
					}
				}
			},

			// 保存用户信息到后端
			async saveUserInfoToBackend() {
				try {
					const requestData = {
						name: this.userInfo.name,
						desc: this.userInfo.desc,
						avatarText: this.userInfo.avatarText,
						avatarUrl: this.userInfo.avatarUrl,
						tags: this.userInfo.tags,
						email: this.userInfo.email,
						phone: this.userInfo.phone
					}
					
					await userAPI.updateDetailedProfile(requestData)
					
					// 保存到本地存储
					uni.setStorageSync('user_profile', this.userInfo)
					
					return true
				} catch (e) {
					console.log('保存用户信息到后端失败:', e)
					return false
				}
			},

			async loadUserStats() {
				console.log('=== 开始加载用户统计数据 ===');
				try {
					const overviewData = await recordAPI.getOverview();
					console.log('后端返回的统计数据:', overviewData);
					if (overviewData) {
						this.stats = {
							totalDays: overviewData.totalDays || 0,
							totalRecords: overviewData.totalRecords || 0,
							avgDaily: overviewData.avgDailyExpense ? overviewData.avgDailyExpense.toFixed(2) : 0
						};
						console.log('处理后的统计数据:', this.stats);
					}
				} catch (e) {
					console.error('=== 加载用户统计数据失败 ===', e);
					uni.showToast({
						title: '加载统计数据失败',
						icon: 'none',
						duration: 2000
					});
					this.stats = { // Reset stats on error
						totalDays: 0,
						totalRecords: 0,
						avgDaily: 0
					};
				}
			},

			// 跳转到编辑个人信息页面
			goToEditProfile() {
				uni.navigateTo({
					url: '/pages/profile-edit/profile-edit'
				})
			},


			// 预览头像
			previewAvatar() {
				if (this.userInfo.avatarUrl) {
					uni.previewImage({
						urls: [this.userInfo.avatarUrl]
					})
				}
			},


			goToRecords() {
				// 跳转到记录列表页面
				uni.navigateTo({
					url: '/pages/records/records'
				})
			},
			goToCategories() {
				// 跳转到分类管理页面
				uni.showToast({
					title: '分类管理功能开发中',
					icon: 'none'
				})
			},
			goToAccountManagement() {
				// 跳转到账户管理页面
				uni.navigateTo({
					url: '/pages/account-management/account-management'
				})
			},
			goToBudgets() {
				// 跳转到预算设置页面
				uni.showToast({
					title: '预算设置功能开发中',
					icon: 'none'
				})
			},
			exportData() {
				uni.showModal({
					title: '数据导出',
					content: '确定要导出所有记账数据吗？',
					success: (res) => {
						if (res.confirm) {
							const data = exportData()
							if (data) {
								// 将数据转换为JSON字符串
								const jsonData = JSON.stringify(data, null, 2)
								
								// 创建下载链接（在H5环境下）
								// #ifdef H5
								const blob = new Blob([jsonData], { type: 'application/json' })
								const url = URL.createObjectURL(blob)
								const a = document.createElement('a')
								a.href = url
								a.download = `记账数据_${new Date().toISOString().split('T')[0]}.json`
								document.body.appendChild(a)
								a.click()
								document.body.removeChild(a)
								URL.revokeObjectURL(url)
								
								uni.showToast({
									title: '导出成功',
									icon: 'success'
								})
								// #endif
								
								// #ifndef H5
								uni.showToast({
									title: '导出成功，数据已保存',
									icon: 'success'
								})
								// #endif
							} else {
								uni.showToast({
									title: '导出失败',
									icon: 'none'
								})
							}
						}
					}
				})
			},
			backupData() {
				uni.showModal({
					title: '数据备份',
					content: '确定要备份所有记账数据吗？',
					success: (res) => {
						if (res.confirm) {
							const data = exportData()
							if (data) {
								// 保存到本地存储作为备份
								try {
									uni.setStorageSync('accounting_backup', {
										data: data,
										backupTime: new Date().toISOString()
									})
									uni.showToast({
										title: '备份成功',
										icon: 'success'
									})
								} catch (e) {
									uni.showToast({
										title: '备份失败',
										icon: 'none'
									})
								}
							}
						}
					}
				})
			},
			importData() {
				uni.showModal({
					title: '数据导入',
					content: '导入数据将覆盖现有数据，确定要继续吗？',
					success: (res) => {
						if (res.confirm) {
							// #ifdef H5
							// H5环境下使用文件选择器
							const input = document.createElement('input')
							input.type = 'file'
							input.accept = '.json'
							input.onchange = (e) => {
								const file = e.target.files[0]
								if (file) {
									const reader = new FileReader()
									reader.onload = (e) => {
										try {
											const data = JSON.parse(e.target.result)
											const success = importData(data)
											if (success) {
												uni.showToast({
													title: '导入成功',
													icon: 'success'
												})
												// 重新加载统计数据
												this.loadUserStats()
											} else {
												uni.showToast({
													title: '导入失败',
													icon: 'none'
												})
											}
										} catch (e) {
											uni.showToast({
												title: '文件格式错误',
												icon: 'none'
											})
										}
									}
									reader.readAsText(file)
								}
							}
							input.click()
							// #endif
							
							// #ifndef H5
							uni.showToast({
								title: '请在H5环境下使用此功能',
								icon: 'none'
							})
							// #endif
						}
					}
				})
			},
			goToThemeSettings() {
				uni.navigateTo({
					url: '/pages/theme-settings/theme-settings'
				})
			},
			goToSettings() {
				uni.showModal({
					title: '应用设置',
					content: '此功能正在开发中，敬请期待！',
					showCancel: false
				})
			},
			goToAbout() {
				uni.showModal({
					title: '关于记账本',
					content: '记账本 v1.0.0\n\n一个简单易用的记账应用，帮助您管理个人财务。\n\n主要功能：\n• 收支记录管理\n• 分类统计\n• 数据可视化\n• 数据导入导出\n\n开发者：记账本团队',
					showCancel: false
				})
			},
			goToFeedback() {
				uni.showModal({
					title: '意见反馈',
					content: '如有问题或建议，请联系我们：\n\n邮箱：feedback@example.com\n\n感谢您的使用！',
					showCancel: false
				})
			},

			// 跳转到修改密码页面
			goToChangePassword() {
				uni.navigateTo({
					url: '/pages/change-password/change-password'
				})
			},

			// 快速主题切换（用于测试）
			quickThemeSwitch() {
				const themes = ['cute', 'classic', 'forest', 'autumn', 'winter', 'sakura', 'mint']
				const currentTheme = themeManager.getCurrentTheme().id
				const currentIndex = themes.indexOf(currentTheme)
				const nextIndex = (currentIndex + 1) % themes.length
				const nextTheme = themes[nextIndex]
				
				console.log('切换主题:', currentTheme, '->', nextTheme)
				themeManager.setTheme(nextTheme)
				
				uni.showToast({
					title: `切换到${themeManager.getTheme(nextTheme).name}主题`,
					icon: 'success',
					duration: 1000
				})
			},

			// 测试首页数据加载（用于测试）
			testDataLoading() {
				uni.showModal({
					title: '测试数据加载',
					content: '这将模拟首次进入应用的数据加载情况，是否继续？',
					confirmText: '测试',
					success: (res) => {
						if (res.confirm) {
							// 通知父组件（main.vue）触发首页数据重新加载
							this.$parent.$refs.indexPage.isFirstLoad = true
							this.$parent.$refs.indexPage.isLoading = false
							this.$parent.$refs.indexPage.recentRecords = []
							this.$parent.$refs.indexPage.monthlyExpense = 0
							this.$parent.$refs.indexPage.monthlyIncome = 0
							this.$parent.$refs.indexPage.monthlyBalance = 0
							
							// 触发数据加载
							this.$parent.$refs.indexPage.loadDataWithLoading()
							
							uni.showToast({
								title: '已重置首页数据，正在重新加载...',
								icon: 'success',
								duration: 2000
							})
						}
					}
				})
			},

			// 调试用户信息
			async debugUserInfo() {
				const token = uni.getStorageSync('token')
				const userProfile = uni.getStorageSync('user_profile')
				const loginUserInfo = uni.getStorageSync('userInfo')
				
				// 测试网络连接
				let networkStatus = '未测试'
				try {
					console.log('测试网络连接...')
					await userAPI.getProfile()
					networkStatus = '连接成功'
				} catch (error) {
					networkStatus = `连接失败: ${error.message}`
					console.log('网络测试失败:', error)
				}
				
				const debugInfo = {
					'Token存在': token ? '是' : '否',
					'Token长度': token ? token.length : 0,
					'网络连接': networkStatus,
					'当前显示的用户信息': this.userInfo,
					'本地存储的用户资料': userProfile,
					'登录时的用户信息': loginUserInfo,
					'API Base URL': 'http://localhost:8080/api'
				}
				
				console.log('调试信息:', debugInfo)
				
				uni.showModal({
					title: '调试信息',
					content: `Token: ${token ? '存在' : '不存在'}\n网络: ${networkStatus}\n昵称: ${this.userInfo.name}\n邮箱: ${this.userInfo.email}\n头像URL: ${this.userInfo.avatarUrl || '无'}\n头像文本: ${this.userInfo.avatarText}`,
					confirmText: '重新加载',
					cancelText: '关闭',
					success: (res) => {
						if (res.confirm) {
							// 强制重新加载用户信息
							this.forceReloadUserInfo()
						}
					}
				})
			},

			// 强制重新加载用户信息
			async forceReloadUserInfo() {
				uni.showLoading({
					title: '重新加载中...'
				})
				
				try {
					// 清除本地缓存
					uni.removeStorageSync('user_profile')
					
					// 重新加载
					await this.loadUserInfo()
				} catch (error) {
					console.log('强制重新加载失败:', error)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},

			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '确认退出',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 显示加载提示
							uni.showLoading({
								title: '退出中...'
							});
							
							// 调用退出登录
							authManager.logout().finally(() => {
								uni.hideLoading();
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	@import '../../uni.scss';
	
	.container {
		background: $cute-gradient-bg;
		min-height: 100vh;
		padding: 30rpx;
		padding-top: calc(var(--status-bar-height) + 30rpx);
		padding-bottom: 120rpx;
		box-sizing: border-box;
	}

	/* 用户信息卡片 */
	.user-card {
		background: $cute-gradient-primary;
		border-radius: $cute-border-radius;
		padding: 40rpx 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		box-shadow: $cute-card-shadow;
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: -50%;
			right: -20%;
			width: 200rpx;
			height: 200rpx;
			background: rgba(255, 255, 255, 0.15);
			border-radius: 50%;
			animation: float 6s ease-in-out infinite;
		}
		
		&::after {
			content: '';
			position: absolute;
			bottom: -30%;
			left: -10%;
			width: 150rpx;
			height: 150rpx;
			background: rgba(255, 182, 193, 0.15);
			border-radius: 50%;
			animation: float 8s ease-in-out infinite reverse;
		}
	}

	@keyframes float {
		0%, 100% { transform: translateY(0px) rotate(0deg); }
		50% { transform: translateY(-20px) rotate(180deg); }
	}

	.user-avatar {
		width: 120rpx;
		height: 120rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
		position: relative;
		z-index: 1;
		transition: $cute-transition;
		cursor: pointer;
		
		&:hover {
			transform: scale(1.1) rotate(5deg);
			background: rgba(255, 255, 255, 0.3);
		}
	}

	.avatar-image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.avatar-text {
		font-size: 60rpx;
	}

	.avatar-edit-overlay {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 40rpx;
		height: 40rpx;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.3s;
	}

	.user-avatar:hover .avatar-edit-overlay {
		opacity: 1;
	}

	.avatar-edit-icon {
		font-size: 20rpx;
		color: white;
	}

	.user-info {
		flex: 1;
		color: white;
		position: relative;
		z-index: 1;
	}

	.user-name {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.user-desc {
		display: block;
		font-size: 26rpx;
		opacity: 0.9;
		margin-bottom: 15rpx;
	}

	.user-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
	}

	.user-tag {
		background: rgba(255, 255, 255, 0.2);
		color: white;
		font-size: 20rpx;
		padding: 6rpx 12rpx;
		border-radius: 20rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.3);
	}

	.user-edit {
		width: 60rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 1;
		transition: $cute-transition;
		
		&:hover {
			transform: scale(1.1);
			background: rgba(255, 255, 255, 0.3);
		}
	}

	.edit-icon {
		font-size: 32rpx;
	}

	/* 统计概览 */
	.stats-section {
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
		transition: $cute-transition;
		
		&:hover {
			transform: $cute-hover-transform;
			box-shadow: 0 15rpx 50rpx $cute-shadow-medium;
		}
	}

	.stats-grid {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.stats-item {
		text-align: center;
		flex: 1;
		transition: $cute-transition;
		
		&:hover {
			transform: $cute-hover-transform;
		}
	}

	.stats-number {
		display: block;
		font-size: 40rpx;
		font-weight: bold;
		color: $cute-primary;
		margin-bottom: 15rpx;
	}

	.stats-label {
		display: block;
		font-size: 26rpx;
		color: $cute-text-secondary;
	}


	/* 功能菜单 */
	.menu-section {
		margin-bottom: 30rpx;
	}

	.menu-group {
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		margin-bottom: 20rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
		overflow: hidden;
		transition: $cute-transition;
		
		&:hover {
			transform: $cute-hover-transform;
			box-shadow: 0 15rpx 50rpx $cute-shadow-medium;
		}
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 2rpx solid $cute-divider;
		transition: $cute-transition;
		position: relative;
		overflow: hidden;
		
		&:last-child {
			border-bottom: none;
		}
		
		&:active {
			background-color: $cute-bg-tertiary;
			transform: $cute-active-transform;
		}
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(144, 238, 144, 0.1), transparent);
			transition: left 0.5s;
		}
		
		&:hover::before {
			left: 100%;
		}
	}

	.menu-icon {
		width: 60rpx;
		height: 60rpx;
		background: $cute-gradient-accent;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 25rpx;
		font-size: 32rpx;
		color: $cute-text-inverse;
		box-shadow: $cute-button-shadow;
		transition: $cute-transition;
		
		&:hover {
			transform: scale(1.1) rotate(5deg);
		}
	}

	.menu-title {
		flex: 1;
		font-size: 30rpx;
		color: $cute-text-primary;
	}

	.menu-arrow {
		font-size: 28rpx;
		color: $cute-text-tertiary;
	}

	// 退出登录按钮特殊样式
	.logout-item {
		.menu-icon {
			background: linear-gradient(135deg, $cute-error, #c0392b);
		}
		
		.menu-title {
			color: $cute-error;
		}
	}

	/* 版本信息 */
	.version-info {
		text-align: center;
		padding: 40rpx 0;
	}

	.version-text {
		font-size: 24rpx;
		color: $cute-text-tertiary;
	}

	.debug-section {
		margin-top: 20rpx;
		padding: 10rpx 20rpx;
		background: rgba(144, 238, 144, 0.1);
		border-radius: 15rpx;
		border: 1rpx solid rgba(144, 238, 144, 0.3);
		cursor: pointer;
		transition: all 0.3s;
		
		&:hover {
			background: rgba(144, 238, 144, 0.2);
		}
	}

	.debug-text {
		font-size: 22rpx;
		color: $cute-primary;
		text-align: center;
		display: block;
	}

</style>
